<template>
	<view class="file-list">
		<template v-if="fileList.length">
			<view :class="{active: (item.id === currentFile.id)}" class="file-list-item" v-for="(item, idx) in fileList" :key="item.id">
				<view class="file-info" @click="handleClick(item)">
					<span class="item-idx">{{idx + 1}}</span>
					<span class="item-name">{{removeTimestampFromFilename(item.name)}}</span>
				</view>
				<uni-icons @click="removeFile(item)" class="item-op" color="#ccc" type="clear" size="30"></uni-icons>
			</view>
		</template>
		<template v-else>
			<view class="no-list" v-show="props.filetype === 'music'">列表里没有歌曲</view>
			<view class="no-list" v-show="props.filetype === 'voice'">列表里没有语音</view>
		</template>
	</view>
</template>

<script lang="ts" setup>
import { emitEvent, useEventBus } from '@/hooks/useEventBus';
import fileManager from "@/utils/fileManager";
import { removeTimestampFromFilename, getTimestampFromFilename } from "@/utils/fileManager";
import { ref, defineProps, withDefaults, defineEmits, defineExpose } from "vue";
import { getRandomInt, showToast } from '@/utils/util';
import type { FileType } from "@/utils/fileManager";
import { onLoad } from "@dcloudio/uni-app";
import type { PlayChangeType } from '../AudioPlayerPanel/AudioPlayer/AudioPlayer.vue';

onLoad(() => {
	getFileList();
})

interface File {
	id: string,
	name: string,
}

const currentFile = ref<File>({
	id: "",
	name: "",
});

const fileList = ref<File[]>([]);


interface Props {
	filetype: FileType
}

const props = withDefaults(defineProps<Props>(), {
	filetype: "music",
})

const emit = defineEmits<{
	(e: 'change', value: string): void
}>();

function handleClick(item: File) {
	currentFile.value = {
		...item
	};
	const src = fileManager.getFullPath(props.filetype, item.name);
	emit("change", src);
	
	if (props.filetype === "voice") {
		emitEvent("pauseMusic", null);
	} else if (props.filetype === "music") {
		emitEvent("pauseVoice", null);
	}
}

async function getFileList() {
	const files = fileManager.getFileList(props.filetype);
	console.log("getFileList: ", props.filetype, files);

	const arr: File[] = [];
	files.forEach(file => {
		arr.push({
			id: getTimestampFromFilename(file),
			name: file,
		})
	})
	fileList.value = arr.sort((a, b) => {
		const timeA = parseInt(getTimestampFromFilename(a.name));
		const timeB = parseInt(getTimestampFromFilename(b.name));
		return timeB - timeA;
	});
}

function removeFile(file: File) {
	const name = removeTimestampFromFilename(file.name);
	if (currentFile.value.name === file.name) {
		showToast(`${name}正在播放`, "none")
		return;
	}
	fileManager.deleteFile(props.filetype, file.name).then(res => {
		res && getFileList();
	});
}

function playPreOrNextAudio(isOrder: boolean, type: PlayChangeType) {
	const len = fileList.value.length;
	const currentIdx = fileList.value.findIndex(item => item.id === currentFile.value.id);
	if (isOrder) {
		let nextIdx = (currentIdx + 1) % len;
		if (type === 'pre') {
			nextIdx = (currentIdx - 1 + len) % len;
		}
		console.log(fileList.value[nextIdx])
		handleClick(fileList.value[nextIdx]);
	} else {
		const randomIdx = getRandomInt(0, len);
		console.log(fileList.value[randomIdx]);
		handleClick(fileList.value[randomIdx]);
	}
}

defineExpose({
	playPreOrNextAudio,
})

useEventBus("getFileList", getFileList);
</script>

<style lang="scss" scoped>
.file-list {
		width: 100%;
		height: 600rpx;
		padding: 10rpx;
		overflow-y: auto;
		
		&-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 12rpx 0;
			
			.file-info {
				width: 90%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				.item-idx {
					width: 10%;
					padding: 10rpx;
				}
				
				.item-name {
					width: 90%;
					padding: 10rpx 0;
					
				}
			}
					
			
			.item-op {
				width: 10%;
				text-align: right;
			}
		}
		
		&-item.active {
			color: $uni-theme-color;
			
			.item-idx {
				border-left: 2px solid $uni-theme-color;
			}
		}
		
		.no-list {
			margin-top: 100rpx;
			text-align: center;
		}
	}
	
</style>